<template>
<div style="height:100%">
  <transition  :enter-active-class="transitionName"  mode="out-in">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
  </transition>
  <transition :enter-active-class="transitionName"  mode="out-in">
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </transition>
</div>
</template>


<script>
export default {
  name: 'app',
  components:{
  },
  data () {
    return {
      transitionName:'fadeInRight',
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },

  watch: {
    '$route'(to, from) {
      const tolevel = to.path.split('/').length
      const fromlevel = from.path.split('/').length
      this.transitionName = tolevel >= fromlevel ? 'fadeInRight' : 'fadeInLeft'
    }
  }
  }
</script>
<style >
</style>

